<template>
  <view class="test-back-training-container">
    <navigator
      hover-class="none"
      url="/pages/work/mock-test/mock-test"
      class="test-back-training-wrap"
    >
      <view>
        <view class="title">题库训练</view>
        <view class="sub-title">Question bank training</view>
      </view>
      <image
        class="icon"
        src="/static/images/work/test-bank-icon-1.png"
        mode="aspectFit"
      ></image>
    </navigator>

    <navigator
      hover-class="none"
      url="/pages/work/mock-test/mock-paper"
      class="simulation-training-wrap"
    >
      <view>
        <view class="title">模拟考试</view>
        <view class="sub-title">Simulation test</view>
      </view>
      <image
        class="icon"
        src="/static/images/work/test-bank-icon-2.png"
        mode="aspectFit"
      ></image>
    </navigator>
  </view>
</template>

<script>
import NavBar from '@/pages/messages/components/nav-bar.vue';
export default {
  data() {
    return {};
  },
  components: {
    NavBar,
  },
  methods: {
    navigateBack() {
      let len = getCurrentPages().length;
      uni.navigateBack({
        delta: len,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.test-back-training-container {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .test-back-training-wrap {
    box-shadow: 0px 20rpx 50rpx 1rpx rgba(136, 196, 156, 0.4);
    background: #88c49c;

    .sub-title {
      color: #a8e5bc;
    }
  }

  .simulation-training-wrap {
    box-shadow: 0px 20px 50px 1px rgba(136, 142, 196, 0.4);
    background: #888ec4;

    .sub-title {
      color: #babee6;
    }
  }

  .test-back-training-wrap,
  .simulation-training-wrap {
    width: 630rpx;
    height: 226rpx;
    padding: 0 43rpx 0 62rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 70rpx;

    .title {
      font-size: 48rpx;
      font-weight: bold;
      color: #ffffff;
      line-height: 67rpx;
    }

    .sub-title {
      margin-top: 8rpx;
      font-size: 22rpx;
      font-weight: 500;
      line-height: 30rpx;
    }

    .icon {
      width: 150rpx;
      height: 150rpx;
    }
  }
}
</style>
